<template>
  <div class="base-table">
    <el-table :data="tabData" :empty-text="i18n.fy.nodata" :element-loading-text="i18n.fy.loading">
      <el-table-column type="selection" width="50" />
      <el-table-column :property="item.prop" :label="item.label" :min-width="item.width"
        v-for="(item, index) in  colList " :key="'table_' + props.tabName + '_' + index" />
    </el-table>
    <el-pagination v-model:current-page="pObj.currentPageNum" v-model:page-size="pObj.ageSizeNum"
      :page-sizes="[100, 200, 300, 400]" :small="pObj.isSmall" :disabled="pObj.isDisabled"
      :background="pObj.isBackground" layout="total, sizes, prev, pager, next, jumper" :total="pObj.totalNum"
      @size-change="handleSizeChangeFun" @current-change="handleCurrentChangeFun" />
  </div>
</template>

<script setup>
import { i18nStore } from "@/pinia/i18n";
const i18n = i18nStore();
const props = defineProps(['DataList', 'ColumnList', 'tabName', 'totalNum', 'pageSizeNum', 'currentPageNum'])
const tabData = ref([])
const colList = ref([])
// 计算属性
// const count = ref(0)
// const doubleCount = computed(() => count.value * 2)

const pObj = reactive({
  currentPageNum: 2,
  pageSizeNum: 100,
  totalNum: 400,
  isSmall: false,
  isBackground: false,
  isDisabled: false
})

// 监听reactive
// watch(() => pObj.currentPageNum,
//   (nval, oval) => {
//     console.log(`更新了分页 ${nval} `)
//   }
// )

onMounted(() => {
  console.log('onMounted->baseTable->props', props);
  tabData.value = props.DataList
  colList.value = props.ColumnList
})

const emits = defineEmits(['handleSizeChangeCbk', 'handleCurrentChangeCbk'])
const handleSizeChangeFun = () => {
  emits('handleSizeChangeCbk', pObj)
}
const handleCurrentChangeFun = () => {
  emits('handleCurrentChangeCbk', pObj)
}
</script>

<style lang="scss" scoped></style>
